<template>
	<view class="box-image">
		<view class="loading">
			<uni-icons class="icon" size="50" color="#ff9894" type="spinner-cycle"></uni-icons>
			<image class="image" :src="src" mode="aspectFill"></image>
		</view>
	</view>
</template>

<script setup>
import { defineProps } from 'vue'
defineProps(['src', 'height'])
</script>

<style lang="scss" scoped>
.box-image {
	position: relative;
	width: 100%;
	height: 100%;
	.loading {
		position: relative;
		width: 100%;
		height: 100%;
		background: linear-gradient(#ffc4cf, #fff5e2) no-repeat;
		.icon {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: scale(2);
			z-index: 0;
			animation: spin 2s linear infinite; /* 设置动画 */
		}
		.image {
			position: absolute;
			width: 100%;
			height: 100%;
			z-index: 1;
			// display: none;
			// visibility: hidden;
		}
	}
}

@keyframes spin {
	0% {
		transform: translate(-50%, -50%) rotate(0deg); /* 开始时角度 */
	}
	100% {
		transform: translate(-50%, -50%) rotate(360deg); /* 结束时角度 */
	}
}
</style>
